<template>
	<div class="box">
		<div><p class="title" v-for="item in title">{{item}}</p></div>
			<div class="moviePic">
				<!--电影图片-->
				<div v-for="item in list" class="pic">
					<img :src="filterImg(item.img)" />
					<!--收藏图标背景-->
					<div class="loveBg"><span></span></div>
					<span class="spanBg"><span class="wantSee">{{item.wish}}想看</span></span>
					<h5 class="movie_title">{{item.nm}}</h5>
					<p class="time">{{setTime(item.comingTitle)}}</p>
				</div>
			</div>
			<notshown2></notshown2>
	</div>
</template>

<script>
import axios from "axios"
import  api from '@/api/index.js'
import Notshown2 from './Notshown2.vue'
export default{
	components:{
		Notshown2
	},
	data:function(){
		return {
			title:["近期最受期待"],
			list:[]
		}
	},
	methods:{
		setTime(item){
			return item.slice(0,item.indexOf(" "))
		},

		getData(){
			console.log(api.movieNotShow)
			axios.get(api.movieNotShow)
			.then((res)=>{
				console.log(res)
				this.list=res.data.coming
				console.log(this.list)
			})
		},
		filterImg(imgSrc){
			return imgSrc.replace(/\w.h/,"170.230")
		}
	},
	mounted(){
		this.getData()
		
	}
}
</script>

<style scoped lang="scss">
	.box{
		padding: 12px 0 12px 15px;
	    background-color: #fff;
	    margin-bottom: 10px;
	   
	}
	.title{
		font-size: 14px;
		margin: 0 0 12px;	
		color: #333;
	}
	.moviePic{

		overflow: scroll;
		padding-bottom: 20px;
		border-bottom: 8px solid #E9E9E9;
		margin-bottom: 10px;
		white-space: nowrap;
		 width: 90%;
		
		.pic{
			position: relative;
			width: 85px;
			height: 115px;
			display: inline-block;
			margin-right:15px;
			img{
				width: 100%;
				height: 100%;
			}
			.loveBg{
				width: 28px;
				height: 28px;
				background: rgba(61,63,71,.6);
				position: absolute;
				top: 0;
				span{
					display: block;
					width: 28px;
					height: 28px;
					background-image:url(../../img/love.png);
					background-size: 10px;
					background-position: 50%;
					background-repeat: no-repeat;
				}
			}
			.wantSee{
				position: absolute;
				color: #faaf00;
				bottom: 2px;
				left: 8px;
				z-index: 2;
				font-size: 11px;
				font-weight: 600;
			}
			.movie_title{
				width: 85px;
				height: 17px;
				font-size: 13px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.time{
				font-size: 12px;
				
			}
		}
	}
</style>